<template>
  <div class="app-container">
    <div class="search-panel">
      <div class="form-group">
        <label for="id">编号</label>
        <input id="id" v-model="searchForm.busId" placeholder="请输入编号" />
      </div>
      <div class="form-group">
        <label for="name">名称</label>
        <input id="name" v-model="searchForm.busName" placeholder="请输入名称" />
      </div>
      <div class="form-group">
        <label for="type">企业类型</label>
        <select id="type" v-model="searchForm.comPaId">
          <option value="">请选择企业类型</option>
          <option v-for="item in comPaList" :key="item.comPaId" :value="item.comPaId">{{ item.comPaName }}</option>
        </select>
      </div>
      <div class="action-buttons">
        <button class="primary-btn" @click="searchData">
          <i class="bx bx-search"></i> 搜索
        </button>
        <button class="secondary-btn" @click="resetForm">
          <i class="bx bx-refresh"></i> 重置
        </button>
      </div>
    </div>
   
    <div class="data-table-container">
      <table class="styled-table">
        <thead>
          <tr>
            <th>编号</th>
            <th>名称</th>
            <th>企业类型</th>
            <th>级别</th>
            <th>联系人</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in dataList" :key="index">
            <td>{{ item.busId }}</td>
            <td>{{ item.busName }}</td>
            <td>{{ item.comPaName }}</td>
            <td>{{ item.level }}</td>
            <td>{{ item.contactPerson }}</td>
            <td>{{ item.notes }}</td>
           
          </tr>
        </tbody>
      </table>
  </div>
    <!-- 分页组件 -->
    
    <div class="pagination-container">
      <el-pagination
      background
      layout="slot,total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 30, 40]"
      :total="page.totalCount"
      v-model:current-page="page.currentPage"
      v-model:page-size="page.pageSize"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
  </div>
</template>

<script lang="ts" setup>
import { ref,reactive,onMounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
const handleClick = () => {
  console.log('click')
}

const tableData =ref([])
const page=reactive({
  PageIndex:1,
  PageSize:10,
  BusId:'',
  BusName:'',
  ComPaId:'',
  totalCount:0,
  totalPage:0,
})
const getdata=()=>{
  axios({
    url:'http://localhost:5062/api/Mangers/GetBP',
    method:'get',
    params:{
      PageIndex:page.PageIndex,
      PageSize:page.PageSize,
      BusId:page.BusId,
      BusName:page.BusName,
      ComPaId:page.ComPaId,
    }
 })
 .then((res)=>{
  tableData.value=res.data.data.data;
  page.totalCount=res.data.data.totalCount;
  page.totalPage=res.data.data.totalPage;
 })
}
onMounted(()=>{
   getdata()
})
 
</script>
